<template>
  <div class="chat-list">
    <!--列表标题-->
    <div class="chat-hd">
      <h1>聊天列表</h1>
      <router-link to='/chat/message/count' class="arrow-wrap">
        消息统计
      </router-link>
    </div>
    <!--聊天好友列表-->
    <ul class="chat-bd">
      <li v-for="(list,index) in chatList" :key="index">
        <router-link :to="{path:'/chat/win',query:{friendId:list.id,friendNickname:list.nickname,friendHeadImg:list.head_img}}">
          <div class="chat-img">
            <img :src="list.head_img" width="60" height="60">
          </div>
          <div class="chat-info">
            <p class="chat-name">{{ list.nickname }}</p>
            <p class="chat-content">{{ list.content }}</p>
            <div class="arrow-icon"></div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "chatList",
  data() {
    return {
      chatList:[]
    }
  },
  methods:{
    getMessageList(){
        //请求列表数据
        this.$axios.get('/message/getlist',{params:{token:this.getCookie('userToken')}}).then(response=>{
        let res=response.data;
        if(res.state===200){
        this.chatList=res.data;
        }
        else if(res.state===500){
          alert(res.msg);
          this.$router.push('/login')
        }
        else{
          alert(res.msg);
        }
    }).catch(error=>{
      console.log(error);
    })
    }
  },
  created() {
    this.getMessageList();
  }
}
</script>

<style scoped>
  @import "../../static/css/chatList.css";
</style>
